<template>
	<view>
		<shopro-navbar back-icon-color="#fff" :background="{}"
			:backTextStyle="{ color: '#000', fontSize: '30rpx', fontWeight: '500' }" :isSharePage='isSharePage'
			:backText="isSharePage?'返回首页':''">
		</shopro-navbar>
		<view class="container">
			<view style="position: relative;">
				<video id="myVideo" @loadeddata="loadeddata" @loadedmetadata='loadedmetadata'
					@fullscreenchange='fullscreenchange' @timeupdate='playTimes' :src="src" v-if="NowFocus==0"
					@error="videoErrorCallback" controls>
					<view class="video-infor">
						<view class="left">
							<text>{{user.sign}}</text>
							<text>用户名：{{setShareInfo.name}}</text>
							<text>电话：{{setShareInfo.mobile}}</text>
						</view>
						<view class="right">
							<image style="width:100rpx;background-color: #eeeeee;" mode="widthFix"
								:src="setShareInfo.image">
							</image>
						</view>
					</view>
				</video>
				<video id="myVideo1" @loadeddata="loadeddata" @loadedmetadata='loadedmetadata'
					@fullscreenchange='fullscreenchange' @timeupdate='playTimes' v-if="NowFocus==1" :src="src"
					@error="videoErrorCallback" controls>
					<view class="video-infor">
						<view class="left">
							<text>{{user.sign}}</text>
							<text>用户名：{{setShareInfo.name}}</text>
							<text>电话：{{setShareInfo.mobile}}</text>
						</view>
						<view class="right">
							<image style="width:100rpx;background-color: #eeeeee;" mode="widthFix"
								:src="setShareInfo.image">
							</image>
						</view>
					</view>
				</video>
				<video id="myVideo2" @loadeddata="loadeddata" @loadedmetadata='loadedmetadata'
					@fullscreenchange='fullscreenchange' @timeupdate='playTimes' v-if="NowFocus==2" :src="src"
					@error="videoErrorCallback" controls>
					<view class="video-infor">
						<view class="left">
							<text>{{user.sign}}</text>
							<text>用户名：{{setShareInfo.name}}</text>
							<text>电话：{{setShareInfo.mobile}}</text>
						</view>
						<view class="right">
							<image style="width:100rpx;background-color: #eeeeee;" mode="widthFix"
								:src="setShareInfo.image">
							</image>
						</view>
					</view>

				</video>

				<view class="video-tel" ref="videoTel" :style="{'top':top,'left':left}">{{setShareInfo.mobile}}</view>

			
			<div id="player-con"></div>
			<view class="video-infor">
				<view class="left">
					<text>{{user.sign}}</text>
					<text>用户名：{{setShareInfo.name}}</text>
					<text>电话：{{setShareInfo.mobile}}</text>
				</view>
				<view class="right">
					<image style="width:100rpx;background-color: #eeeeee;" mode="widthFix" :src="setShareInfo.image">
					</image>
				</view>
			</view>
			<view class="detail-info" v-if="detailInfoList[NowFocus]">
				<u-parse :html="detailInfoList[NowFocus]"></u-parse>
			</view>
</view>
		</view>
		<share-modal :userid='shoreId' ref="ShareModal"></share-modal>
		<uni-popup is-mask-click='false' :mask-click='false' style="background-color:rgba(0,0,0,.4); z-index: 101;"
			id="SureSubmit" ref="SureSubmit" type="dialog">
			<view class="floatcontainer">
				<view class="text">
					暂无授权,授权后方可查看,请联系客服18926048918
					<text class="know" @click="readkonw">阅读须知</text>
				</view>

				<view class="btnContainer">
					<button type="default" @click="$wanlshop.back(1)">关闭</button>
					<!-- 			<button type="primary" @click="buy()"
						style="background: #8CBF6B;color: #fff;">购买</button> -->
				</view>
			</view>
		</uni-popup>
		<uni-popup is-mask-click='true' :mask-click='true' style="background-color:rgba(0,0,0,.4); z-index: 101;"
			id="SureSubmit2" ref="SureSubmit2" type="dialog">
			<view class="floatcontainer floatcontainer2">
				<scroll-view class="infor" scroll-y="true">
					<view v-html="konwInfor"></view>
				</scroll-view>
				<view class="btnContainer">
					<button type="default" @click="closeKnow">关闭</button>
				</view>
			</view>
		</uni-popup>
		<view class="btn-bottom-fixed">
			<view @tap="$wanlshop.auth('/pages/teacher/userCard')" class="changeCardBtn">
				<image src="../../static/images/live/hand.png" class="hand-img"></image><text>1.点击设置名片信息</text>
			</view>
			<view @tap="showGuide=!showGuide" class="changeCardBtn">
				<image src="../../static/images/live/share.png" class="share-img"></image><text>2.分享去引流</text>
			</view>
		</view>
		<view class="showGuidebg" v-show="showGuide" @click="showGuide=!showGuide">
			<view class="showGuideStyle"></view>
		</view>

		<ad-modal ref="adModal" :adInfo='adInfo' @jumpAd='jumpAd'></ad-modal>
	</view>

</template>

<script>
	import jssdk from '@/common/libs/jssdk';
	import share from '@/shopro/share/index.js'
	import shareModal from '@/pages/teacher/components/shareModal.vue'
	import adModal from '@/pages/teacher/components/adModal.vue'
	import shoproNavbar from '@/components/shopro-navbar/shopro-navbar.vue'


	export default {
		components: {
			shareModal,
			adModal,
			shoproNavbar
		},
		data() {
			return {
				username: '',
				id: '',
				title: '',
				AllList: [],
				currentPage: '1',
				src: '',
				NowFocus: 0,
				List: ['PPT', '动画', '茶手工'],
				pptVideo: '',
				handworkVideo: "",
				cartoonVideo: "",
				type: '',
				videoContext1: {},
				videoContext: {},
				videoContext2: {},
				package_vip: '',
				isSharePage: false,
				user: "",
				konwInfor: '',
				timeOut: null,
				playTime: 0,
				showName: true,
				shorePic: '',
				shoreDescList: {},
				shoreId: '',
				adInfo: {},
				freeTimeList: '',
				freeTime: "",
				detailInfoList: {},
				videoInfo: {},
				hideAd: true,
				dp: {},
				showGuide: false, //是否显示引导指示
				player: null,
				setShareInfo: {},
				top:0,
				left:0
			}
		},
		
		async onLoad(option) {
			console.log(666, this.$u.os())
			if (location.href.indexOf('isShare=true') !== -1) {
				this.isSharePage = true
				this.shoreId = option.userid
			}
			console.log(option)
			this.id = option.id;
			this.title = option.name;
			this.type = option.type
			this.user = uni.getStorageSync('userInfo')
			this.setShareInfo = uni.getStorageSync("setShareInfo")
			console.log('user', this.user)
			let shareId = uni.getStorageSync('userInfo').id
			await this.getList()
			await this.getKnow()



		},
		onShow() {
			this.$refs.ShareModal.loadCard()
			this.setShareInfo = uni.getStorageSync("setShareInfo")
		},
		onReady() {
			// if (!uni.getStorageSync('userInfo')) {
			// 	uni.showToast({
			// 		title: '未登录,即将跳转登录页',
			// 		icon: "error"
			// 	})
			// 	setTimeout(() => {
			// 		uni.reLaunch({
			// 			url: '/pages/user/auth/auth'
			// 		})
			// 	}, 1000)
			// }
		},
		onHide() {
			uni.hideLoading()
		},
		watch: {
			playTime(val, up) {
				if (val === 0) {
					// uni.showLoading({
					// 	title: "加载中..."
					// })
				} else {
					setTimeout(() => {
						uni.hideLoading()
					}, 1000)

				}
			}
		},
		methods: {
			// fullscreenchange(e) {
			// 	console.log(e.detail)
			// 	if (e.detail.fillScreen) {
			// 		this.showName = false
			// 	}
			// },
			// loadeddata() {
			// 	uni.showLoading({
			// 		title: "加载中..."
			// 	})
			// },
			loadedmetadata(e) {
				this.playTime = e.detail.duration
			},
			readkonw() {
				this.$refs.SureSubmit2.open()
			},
			closeKnow() {
				this.$refs.SureSubmit2.close()
			},
			changeLocal() {
				console.log("chan")
				this.top=Math.random() * 180 + 'px'
				this.left=Math.random() * 300 + 'px'
			},
			getKnow() {
				var that = this;
				this.$api.post({
					url: '/index/index'
				}).then(res => {
					console.log('know', res)
					that.konwInfor = res.impower_xieyi
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			getShareInfo() {
				this.$api.post({
					url: '/topic/shareInfo'

				}).then(res => {
					console.log(res)
					return res
				})
			},
			jumpAd(val) {
				console.log(val)
				this.hideAd = val
			},
			//退出全屏
			exitFull() {
				var exitMethod =
					document.mozCancelFullScreen || //Chrome等
					document.webkitExitFullscreen || //FireFox
					document.exitFullscreen ||
					document.msExitFullscreen ||
					document.cancelFullscreen; //W3C
				if (exitMethod) {
					exitMethod.call(document);

				} else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
					var wscript = new ActiveXObject("WScript.Shell");
					if (wscript !== null) {
						wscript.SendKeys("{F11}");
					}
				}
			},
			playTimes(time) {
				var currentime = time
				console.log("11", this.player,this.player.fullscreenService
								.isFullScreen, uni.getSystemInfoSync().platform)
				if (this.type !== 'courses') {
					let ads = this.videoInfo.news_list
					ads.forEach(item => {
						if (Number(item.seconds) <= currentime && this.hideAd) {
							this.player.pause();
							this.$refs.adModal.showModal(item)
							if(this.player.fullscreenService.isFullScreen){
								this.player.fullscreenService.cancelFullScreen();
							}
							return;
						}
					})
				}
				let freeTimeCur = this.type == 'courses' ? this.freeTimeList[this.NowFocus] : this.freeTime

				if (currentime >= Number(freeTimeCur) && this.package_vip ==
					null) {
					if (this.type == 'courses') {
						this.player.pause();
						if(this.player.fullscreenService.isFullScreen){
							this.player.fullscreenService.cancelFullScreen();
						}
						uni.showToast({
							title: '请您先授权登录',
							icon: 'none'
						})
						setTimeout(function() {
							uni.navigateTo({
								url: `/pages/user/auth/auth`
							});
						}, 1000)
					}

				}
				if (currentime >= Number(freeTimeCur) && this.package_vip ==
					'0') {
					this.player.pause();
					if(this.player.fullscreenService.isFullScreen){
						this.player.fullscreenService.cancelFullScreen();
					}
					if (!uni.getStorageSync('userInfo')) {
						uni.showToast({
							title: '请您先授权登录',
							icon: 'none'
						})
						setTimeout(function() {
							uni.navigateTo({
								url: `/pages/user/auth/auth`
							});
						}, 500)
					} else {
						this.$refs.SureSubmit.open()
					}
				}
			},
			getList() {
				console.log(this.type)
				let url = this.type == 'courses' ? '/course/detail' : this.type == 'study' ? '/study/detail' : ''
				var that = this;
				this.$api.post({
					url: url,
					data: {
						id: this.id
					},
					// contentType: 'application/json',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					// dataType:'json',
					success: (res) => {
						console.log('res', res);
						this.videoInfo = res
						this.adInfo = res.news_list
						this.package_vip = res.package_vip
						this.shorePic = res.image
						if (this.type == 'courses') {
							this.pptVideo = res.PPT_file.video_url.PlayInfoList.PlayInfo[0].PlayURL
							this.handworkVideo = res.handwork_file.video_url.PlayInfoList.PlayInfo[0].PlayURL
							this.cartoonVideo = res.cartoon_file.video_url.PlayInfoList.PlayInfo[0].PlayURL
							this.shoreDescList = [res.ppt_desc, res.cartoon_desc, res.handwork_desc, ]
							this.detailInfoList = [res.ppt_content, res.cartoon_content, res
								.handwork_content,
							]
							this.freeTimeList = [res.ppt_seconds, res.cartoon_seconds, res.handwork_seconds, ]
						} else {
							this.pptVideo = res.teach_file.video_url.PlayInfoList.PlayInfo[0].PlayURL
							this.shoreDescList = [res.desc]
							this.detailInfoList = [res.content]
							this.freeTime = res.seconds || ''
						}

						this.src = this.pptVideo // 		this.AllList = res.list;
						this.getLive(this.src)
						this.videoContext = uni.createVideoContext('myVideo')
						this.videoContext1 = uni.createVideoContext('myVideo1')
						this.videoContext2 = uni.createVideoContext('myVideo2')
						this.changeLocal();
						if (that.timeOut) {
							that.timeOut = null
						} else {
							that.timeOut = setInterval(that.changeLocal, 3200)
						}

						// 分享
						let shareId = uni.getStorageSync('userInfo').id
						let res1 = share.setShareInfo({
							title: this.title,
							desc: this.shoreDescList[this.NowFocus],
							image: this.shorePic,
							params: {
								page: 2,
								pageId: this.id,
								shareId: shareId
							}
						});
						let url = window.location.href.split('&')

						let link = url[0] + '&' + url[1] + '&' + url[2] + '&isShare=true&userid=' + shareId +
							'&' + res1.query
						console.log(link)
						jssdk.share({
							title: this.title,
							desc: this.shoreDescList[this.NowFocus],
							// link:encodeURIComponent(link),
							link: link,
							imgUrl: this.shorePic,
							type: this.type == 'courses' ? '1' : '5',
							id: this.id
						})
					},
					fail: error => {
						if (this.isSharePage) {
							uni.navigateTo({
								url: '/pages/user/auth/auth'
							})
						} else {
							this.$wanlshop.back(1)
						}
						console.log(error)
					}
				})
				// if (this.playTime == 0 && this.$u.os() != "ios") {
				// 	setTimeout(() => {
				// 		uni.showLoading({
				// 			title: "视频加载中...",
				// 			mask: true
				// 		})
				// 	}, 1000)
				// }
			},
			changeActive(n) {
				if (n == 0) {
					this.videoContext.play();
					this.videoContext1.pause();
					this.videoContext2.pause();

				} else if (n == 1) {
					this.videoContext1.play();
					this.videoContext.pause();
					this.videoContext2.pause();
				} else {
					this.videoContext2.play();
					this.videoContext.pause();
					this.videoContext1.pause();
				}
				console.log(n)
				this.NowFocus = n
				this.src = n == 0 ? this.pptVideo : n == 1 ? this.cartoonVideo : this.handworkVideo
			},

			getLive(src) {
				let vm = this
				vm.player = new Aliplayer({
					"id": "player-con",
					"source": src,
					"width": "100%",
					"height": "422rpx",
					"autoplay": true,
					"isLive": false,
					"rePlay": false,
					"playsinline": true,
					"preload": true,
					"controlBarVisibility": "hover",
					"useH5Prism": true
				}, function(e) {
					console.log("The player is created");
				});
				var timer = setInterval(() => {
					var curTime = parseInt(vm.player.getCurrentTime());
					if (vm.player && vm.player.getStatus() == "playing") {
						vm.playTimes(curTime)
					}
				}, 1000);
			},
			videoErrorCallback() {

			},
			wanlShare(item) {
				// console.log(item)
				let shareId = uni.getStorageSync('userInfo').id
				let res = share.setShareInfo({
					title: item.name,
					desc: '',
					image: item.image,
					params: {
						page: 2,
						pageId: item.id,
						shareId: shareId
					}
				});
				console.log('设置分享', res)
				// this.showShare = true;
				let link = window.location.href + '?type=study&id=' + item.id +
					'&name=' + item.name + '&' + res.query

				jssdk.share({
					title: item.name,
					desc: "",
					// link:encodeURIComponent(link),
					link: link,
					imgUrl: item.image
				})
				uni.showToast({
					title: '请点击右上角进行分享',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {

		#player-con {
			height: 422rpx;
			position: relative;
			overflow: hidden;
		}

		#myVideo,
		#myVideo1,
		#myVideo2 {
			width: 100%;
			height: 422rpx;
			display: none;
		}

		/deep/.uni-video-bar {
			z-index: 100;
		}

		.detail-info {
			margin: 20rpx 20rpx;
			min-height: 100rpx;
			padding: 20rpx;
		}

		.video-tel {
			position: absolute;
			left: -100%;
			top: -100%;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			z-index: 99;
			opacity: 0.65;
			transition: 3s;
		}

		.head-top {
			position: absolute;
			height: 60rpx;
			width: 60rpx;
			top: 20rpx;
			left: 20rpx;
			color: #fff;

			.image {
				width: 60rpx;
				height: 60rpx;
			}
		}

		.video-infor {
			position: absolute;
			left: 20rpx;
			top: 340rpx;
			min-width: 250rpx;
			font-size: 24rpx;
			color: #333;
			line-height: 30rpx;
			z-index: 9;
			padding-left: 30rpx;

			.left {
				background-color: #aed0fd;
				color: #333;
				padding: 10rpx;
				border-radius: 120rpx;
				// margin-left: 10rpx;
				// padding-right: 80rpx;

				text {
					display: block;
					font-size: 18rpx;
					line-height: 25rpx;
					margin-left: 50rpx;
				}
			}

			.right {
				position: absolute;
				left: 0;
				overflow: hidden;
				bottom: 0;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;

				image {
					width: 80rpx !important;
					height: 80rpx !important;
					border-radius: 50%;
				}
			}
		}

		.video-infor-2 {
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			min-width: 300rpx;
			font-size: 24rpx;
			color: #333;
			line-height: 30rpx;
			z-index: 99;
			padding-left: 30rpx;

			.left {
				background-color: #aed0fd;
				color: #333;
				padding: 10rpx;
				border-radius: 120rpx;
				margin-right: 10rpx;
				// padding-right: 80rpx;

				text {
					display: block;
					font-size: 18rpx;
					line-height: 25rpx;
					margin-left: 0rpx;
					margin-right: 60rpx;
				}
			}

			.right {
				position: absolute;
				right: 0;
				border-radius: 50%;
				overflow: hidden;
				bottom: 0;
				width: 80rpx;
				height: 80rpx;

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					overflow: hidden;
				}
			}
		}
	}

	.List {
		display: flex;
		text-align: center;
		line-height: 43px;
		justify-content: space-around;
		margin-top: 40rpx;

		view {
			font-size: 14px;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			width: 220rpx;
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 6rpx;
			opacity: 1;
			border: 1px solid #DDDDDD;


		}

		.active {
			border: 2rpx solid #D6483D;
		}

	}

	.floatcontainer {
		width: 630rpx;
		height: 320rpx;
		background: #fff;
		border-radius: 20rpx;
		margin: 400rpx auto;
		padding-top: 72rpx;

		&.floatcontainer2 {
			min-height: 320rpx;
			height: auto;
			padding: 60rpx 0;
			margin: 200rpx auto;
		}

		.know {
			display: block;
			color: #666;
			text-decoration: underline;
			margin-top: 10rpx;
		}

		.infor {
			padding: 0 20rpx;
			max-height: 50vh;
			min-height: 100rpx;
			overflow-y: auto;
			margin-bottom: 20rpx;
		}
	}

	.text {
		margin: 0 auto 44rpx;
		text-align: center;
	}

	.btnContainer {
		display: flex;
		justify-content: space-around;

		button {
			width: 100px;
			height: 30px;
			background: #fff;
			font-size: 13px;
			font-family: PingFang-SC-Medium-, PingFang-SC-Medium;
			font-weight: normal;
			color: #333333;
		}
	}

	.btn-bottom-fixed {
		position: fixed;
		bottom: 0;
		margin: 0 auto;
		left: 0;
		right: 0;
		width: 538rpx;
	}

	.changeCardBtn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(90deg, #98E05F, #0DE3AC);
		box-shadow: 0px 2px 5px 0px rgba(30, 36, 34, 0.3);
		border-radius: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.hand-img {
			width: 32rpx;
			height: 36rpx;
		}

		.share-img {
			width: 32rpx;
			height: 32rpx;
		}

		text {
			margin-left: 10rpx;
			font-size: 24rpx;
		}
	}

	.showGuidebg {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.4);
		z-index: 999;
	}

	.showGuideStyle {
		position: absolute;
		background: url(../../static/images/live/guidebg.png) no-repeat;
		width: 100px;
		background-size: 100% 100%;
		height: 32px;
		right: 12rpx;
		top: 6rpx;
	}
</style>
